<template>
	<view class="tmpl">
		<sl-filter :ref="'slFilter'" :menuList="menuList" @result="result"></sl-filter>

		<view class="table-container" style="margin-top: 20px;">
			<view class="table" cellspacing="0" cellpadding="0">
				<view class="tr">
					<view class="th">单位名称</view>
					<view class="th">注册人数</view>
					<view class="th">学习人数</view>
					<view class="th">学习率 %</view>
					<view class="th">通过人数</view>
					<view class="th">通过率 %</view>
				</view>
				<view class="tr" v-for="item in study_statistics_list">
					<view class="td">{{item.dwmc}}</view>
					<view class="td">{{item.zcrs}}</view>
					<view class="td blue-text">{{item.xxrs}}</view>
					<view class="td">{{item.xxl ?item.xxl : 0 * 100 }}%</view>
					<view class="td">{{item.tgrs}}</view>
					<view class="td">{{item.tgl * 100 }}%</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../static/common/request.js';
	import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue';

	export default {
		components: {
			slFilter
		},
		data() {
			return {
				menuList: [{
						'title': '日期',
						'key': 'key_1',
						'detailList': [{
							title: '全部',
							value: ''
						}]
					},
					{
						'title': '未学习人数',
						'key': 'key_2',
						'detailList': [],
						'url': './unstudy_statistics'
					}
				],
				member_count: 0,
				study_statistics_list: [],
			};
		},
		onShow: function() {
			let _this = this;
			this.$api.getUserList({}).then(res => {
				_this.member_count = res.data.data.length;
			})
			this.getDate()
			// 日期列表
			_this.menuList[0].detailList = []
			_this.menuList[0].detailList.push({
				title: '全部',
				value: ''
			});
			for (let i = 0; i <= 7; i++) {
				let date = _this.$_if.GetOfferDate(-i);
				let dept_name = date; // 名称
				let dept_id = date; //  ID
				let data = {
					title: dept_name,
					value: dept_id
				};
				_this.menuList[0].detailList.push(data);
			}
		},
		methods: {
			result(value) {
				let date = value.key_1;
				console.log(date)
				this.getDate(date)
			},
			getDate(date = ""){
				let _this = this;
				this.$api.studyStatistics({
					yearMonth : date
				}).then(res => {
					console.log(res)
					let data = [];
					res.data.forEach(function(item, i) {
						item['tgl'] = (Number(item.xxrs) / _this.member_count).toFixed(2)
					})
					_this.study_statistics_list = res.data;
				})
			}
		}
	};
</script>

<style lang="scss">
	.blue-text {
		color: #5ba8d7 !important;
	}

	page {
		background-color: #fff;
	}

	.table-container {
		margin: 20rpx;
		padding: 0;
		border: solid 1px #e7e7e8;
		border-radius: 8rpx;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, .1);

		.table {
			border-collapse: collapse;

			.tr {
				width: 100%;
				border-top: solid 1px #dadada;
				display: flex;
				justify-content: space-between;

				&:first-child {
					border: none;
				}
			}

			.tr .th,
			.tr .td {
				padding: 0;
				margin: 0;
				text-align: center;
			}

			.tr .th {
				background-color: #eff2f7;
				color: #444644;
				font-size: $uni-font-size-base;
				font-weight: normal;
				padding: 10rpx;
				width: 50px;

				&:first-child {
					text-align: left;
					padding-left: 20rpx;
					width: calc(100% - 180px);
				}
			}

			.tr .td {
				padding: 20rpx;
				font-weight: bold;
				color: #454545;
				width: 50px;

				&:first-child {
					text-align: left;
					padding-left: 20rpx;
					@extend .blue-text;
					width: calc(100% - 180px);
				}
			}
		}
	}
</style>
